<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { getShowState } from "@/hooks/subject";
import {
  getTableData,
  deleteItem,
  editIsShow,
  addItem,
  getItemInfo,
  editItem,
  getTagOptions,
} from "@/api/subject/tag";
let queryData = ref({
  subject_id: null,
  directory_id: null,
  tag_name: null,
  is_show: null,
  page: 1,
  limit: 10,
});
let tagOptions = null;
const getOptions = async () => {
  const { data } = await getTagOptions();
  tagOptions = data;
};

getOptions();
const states = getShowState(false);

const tableData = ref([]);
const columnData = [
  { prop: "tag_name", label: "标签名称", isCustom: false },
  { prop: "directory_name", label: "归属目录", isCustom: false },
  { prop: "subject_name", label: "归属学科", isCustom: false },
  { prop: "username", label: "创建人", isCustom: false },
  { prop: "is_show", label: "是否显示", isCustom: true },
];
const total = ref(0);

// 初始化表格数据
const initData = async () => {
  const res = await getTableData(queryData.value);
  tableData.value = res.data.list;
  total.value = res.data.total;
};
initData();

// 编辑回显
const handlerEdit = async (val) => {
  const res = await getItemInfo(val);
  formData.value = res.data;
  dialogVisible.value = true;
};

// 删除
const handlerDel = async (val) => {
  await deleteItem(val);
  ElMessage.success("删除成功");
  initData();
};

// 分页
const handleSizeChange = async (val) => {
  queryData.value.limit = val;
  initData();
};

const handleCurrentChange = async (val) => {
  queryData.value.page = val;
  initData();
};

// 是否显示
const handlerShowChange = async (id, is_show) => {
  if (!id) return;
  await editIsShow(id, is_show);
  ElMessage.success("切换成功");
};
</script>
<template>
  <el-card>
    <!-- 搜索组件 start -->
    <searchHeader>
      <template #search>
        <el-form :model="queryData" ref="form" label-width="80px" inline>
          <el-form-item label="标签名称">
            <el-input
              v-model="queryData.tag_name"
              placeholder="请输入标签名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="归属学科">
            <el-select
              v-model="queryData.is_show"
              placeholder="请选择归属学科"
              clearable
              filterable
            >
              <el-option
                v-for="item in tagOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归属目录">
            <el-select
              v-model="queryData.is_show"
              placeholder="请选择归属目录"
              clearable
              filterable
            >
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示状态">
            <el-select
              v-model="queryData.is_show"
              placeholder="请选择显示状态"
              clearable
              filterable
            >
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #btn>
        <el-button type="primary" size="mini">创建标签</el-button>
      </template>
    </searchHeader>
    <!-- 搜索组件 end -->
    <!-- 表格组件 start -->
    <MyTable
      :tableData="tableData"
      :columnData="columnData"
      :currentPage="queryData.page"
      :pageSize="queryData.limit"
      :total="total"
      @edit="handlerEdit"
      @del="handlerDel"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
   
      <template #is_show="{ row }">
        <el-switch
          v-model="row.is_show"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="2"
          @change="handlerShowChange(row.id, row.is_show)"
        />
      </template>
    </MyTable>
    <!-- 表格组件 end -->
  </el-card>
</template>



<style lang="scss" scoped>
</style>